<template>
  <tr class="agent-tr">
    <td class="agent">{{one.agentName}}</td>
    <td>{{one.agentNo}}</td>
    <td v-for="(item, index) in monitorHeader" v-show="item.show === true" :key="index">
      <div v-if="item.name !== 'state' && item.name !== 'autoStatus' && item.name !== 'claimTime' && item.name !== 'closeSessionTotalTime' && item.name !== 'sessionTotalTime1' && item.name !== 'sessionTotalTime2' && item.name !== 'sessionTotalTime3' && item.name !== 'sessionTotalTime4' && item.name !== 'sessionTotalTime5'">{{one[item.name]}}</div>
      <div v-if="item.name === 'state'">
        <div class="indent">PC：<span :class="one.pcState ? 'online' : 'offline'" v-text="one.pcState ? $t('monitor.online') : $t('monitor.offline')"></span></div>
        <div>APP：<span :class="one.mobileState ? 'online' : 'offline'" v-text="one.mobileState ? $t('monitor.online') : $t('monitor.offline')"></span></div>
      </div>
      <div v-if="item.name === 'autoStatus'">
        <div class="indent">PC：<span :class="one.pcAutoStatus ? 'online' : 'closed'" v-text="one.customizeStatus !== '' ? one.customizeStatus : one.pcAutoStatus ? $t('public.online') : $t('public.offline')">{{one.pcAutoStatus}}</span></div>
        <div>APP：<span :class="one.mobileAutoStatus ? 'online' : 'closed'" v-text="one.mobileAutoStatus ? $t('public.open') : $t('public.close')"></span></div>
        <div>{{$t('public.mail')}}：<span :class="one.mailAutoStatus ? 'online' : 'closed'" v-text="one.mailAutoStatus ? $t('public.open') : $t('public.close')"></span></div>
      </div>
      <div v-if="item.name === 'claimTime'">
        <div class="indent">PC：{{one.pcClaimTime|timeDown(one.pcClaimTime)}}</div>
        <div>APP：{{one.mobileClaimTime|timeDown(one.mobileClaimTime)}}</div>
      </div>
      <div v-if="item.name === 'closeSessionTotalTime'">
        <div class="indent">{{one.closeSessionTotalTime|timeDown(one.closeSessionTotalTime)}}</div>
      </div>
      <div v-if="item.name === 'sessionTotalTime1'">
        <div class="indent">{{one.sessionTotalTime1|timeDown(one.sessionTotalTime1)}}</div>
      </div>
      <div v-if="item.name === 'sessionTotalTime2'">
        <div class="indent">{{one.sessionTotalTime2|timeDown(one.sessionTotalTime2)}}</div>
      </div>
      <div v-if="item.name === 'sessionTotalTime3'">
        <div class="indent">{{one.sessionTotalTime3|timeDown(one.sessionTotalTime3)}}</div>
      </div>
      <div v-if="item.name === 'sessionTotalTime4'">
        <div class="indent">{{one.sessionTotalTime4|timeDown(one.sessionTotalTime4)}}</div>
      </div>
      <div v-if="item.name === 'sessionTotalTime5'">
        <div class="indent">{{one.sessionTotalTime5|timeDown(one.sessionTotalTime5)}}</div>
      </div>
    </td>
  </tr>
</template>
<script>
  import {showCountDown} from '@/utils/workflowUtils.js'
  export default {
    name: 'trAgentIm',
    data () {
      return {
        activeName: 'table'
      }
    },
    props: {
      one: {type: Object, default: function () { return {} }},
      monitorHeader: {type: Array, default: function () { return [] }}
    },
    methods: {
    },
    filters: {
      timeDown (value) {
        if (value) {
          return showCountDown(value)
        } else {
          return '00:00:00'
        }
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl';
  .agent-tr
    display table
    width 100%
    table-layout fixed
    td
      word-break break-all
  .agent
    max-width 120px
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .online
    color #41b27f
  .offline
    color $cf-gray4
  .closed
    color $c-pink
  .button-group
    display none
    position: absolute
    top: -20px
    right 35px
    z-index 1
    background-color $cf-white
    text-align center
    padding 0 10px
    border 1px solid #eee
  .operate
    position relative
    &:hover
      .button-group
        display: block
  .indent
    text-indent 6px
</style>
